<template>
  <div class="fr page">
    <div class="sui-pagination clearfix">
      <ul>
        <li
          class="prev"
          :class="{ disabled: pageNo <= 1 }"
          @click="NextPage(0)"
        >
          <!-- 当选中的值到了小于或等于1的时候，这个上一页就要禁用掉 -->
          <a>«上一页</a>
        </li>
        <li class="dotted" v-show="startNumandEndNum.start > 1">
          <!-- 当初始页码小于或等于1的时候，这个就要隐藏掉 -->
          <span>...</span>
        </li>
        <li
          v-for="(page, index) in startNumandEndNum.end"
          :key="index"
          v-show="page >= startNumandEndNum.start"
          :class="{
            active: pageNo == page,
          }"
          @click="numbers(page)"
        >
          <!--这个v-for遍历的为连续页码数结束的数字，之后v-show来隐藏比连续页码数第一位小的数  -->
          <!-- 分页器的主要部分 -->
          <a>{{ page }}</a>
        </li>
        <li class="dotted" v-show="startNumandEndNum.end != PageNumber">
          <!--当选中的值等于分页器的最后一个值的时候，把这个。。。隐藏掉-->
          <span>...</span>
        </li>

        <li
          class="next"
          :class="{ disabled: pageNo == PageNumber }"
          @click="NextPage(1)"
        >
          <!-- 当选中的值到了最后一页的时候，这个下一页就要禁用掉 -->
          <a>下一页»</a>
        </li>
      </ul>
      <div>
        <span>共{{ PageNumber }}页&nbsp;</span>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "Paging",
  data() {
    return {};
  },  
  props: ["pageNo", "pageSize", "total", "continues"],          
  computed: {
    PageNumber() {
      return Math.ceil(this.total / this.pageSize);
    },
    startNumandEndNum() {
      const { continues, pageNo, PageNumber } = this;
      let start = 0,
        end = 0;
      // 不正常现象，就是页码比总页面多
      if (continues > PageNumber) {
        start = 1; //初始页码为1
        end = PageNumber; //最后的页码为PageNumber，总页面
      } else {
        start = pageNo - parseInt(continues / 2); //连续的页码为5，就是5/2取整
        end = pageNo + parseInt(continues / 2); //这个也一样，最后的页码比当前的页码大2，因为页码continues为5个字符展示
        if (start < 1) {
          //当初始页码小于1的时候
          //当出现了不正常现象，就是satrt这个开头小于1了
          start = 1; //初始页码为1，
          end = continues; //最后的页码为要求为多少页码的数
        } else if (end > PageNumber) {
          //当最后的页码大于总页码
          end = PageNumber; //最后的页码等于总页码
          start = PageNumber - continues + 1; //初始的页码等于总页码-连续页码数+1，加一是为了包括最后的那个页码
        }
      }
      return { start, end };
    },
  },
  methods: {
    //分页器的上下页的函数
    NextPage(page) {
      if (!page) {
        if (this.pageNo != 1) {
          this.$Eve.$emit("pageNo", page);
        }
      } else {
        if (this.pageNo != this.PageNumber) {
          this.$Eve.$emit("pageNo", page);
        }
      }
    },
    //分页器的点击切换
    numbers(e) {
      this.$Eve.$emit("numbers", e);
      // console.log(e);
    },
  },
};
</script>

<style lang="less">
.page {
  width: 880px;
  height: 66px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  float: right;

  .sui-pagination {
    display: flex;
    align-items: center;
    margin: 18px 0;

    ul {
      margin-left: 0;
      margin-bottom: 0;
      vertical-align: middle;
      width: 600px;
      float: left;

      li {
        line-height: 18px;
        display: inline-block;

        a {
          position: relative;
          float: left;
          line-height: 18px;
          text-decoration: none;
          background-color: #fff;
          border: 1px solid #e0e9ee;
          margin-left: -1px;
          font-size: 14px;
          padding: 9px 18px;
          color: #333;
        }

        &.active {
          a {
            background-color: #fff;
            color: #e1251b;
            border-color: #fff;
            cursor: default;
          }
        }

        &.prev {
          a {
            background-color: #fafafa;
          }
        }

        &.disabled {
          a {
            color: #999;
            cursor: default;
          }
        }

        &.dotted {
          span {
            margin-left: -1px;
            position: relative;
            float: left;
            line-height: 18px;
            text-decoration: none;
            background-color: #fff;
            font-size: 14px;
            border: 0;
            padding: 9px 18px;
            color: #333;
          }
        }

        &.next {
          a {
            background-color: #fafafa;
          }
        }
      }
    }

    div {
      color: #333;
      font-size: 14px;
      float: right;
      width: 241px;
    }
  }
}
</style>
